<template>
  <div class = "top">
    <div v-if="payStatus">恭喜您支付成功~</div>
    <div v-else>支付失败</div>
    <div class="count">将在{{ count }}秒后跳转页面</div>
  </div>
</template>

<script>
import http from "@/common/api/request.js";
import qs from "qs";
export default {
  data() {
    return {
      count: "", //倒计时
      payStatus: false,
    };
  },
  created() {
    this.getData();
    this.threeGo();
  },
  methods: {
    getData() {
      console.log(this.$route.query.out_trade_no);
      let datas = {
        out_trade_no: this.$route.query.out_trade_no,
        trade_no: this.$route.query.trade_no,
      };
      http
        .$axios({
          url: "http://127.0.0.1:3008/goods/successPayment",
          method: "post",
          headers: {
            token: true,
          },
          data: qs.stringify(datas),
        })
        .then((res) => {
          if (res.code == 2) {
            this.payStatus = true;
          }
        });
    },

    //3秒后进入跳转页面
    threeGo() {
      const TIME_COUNT = 7;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            //跳转的页面写在此处
            this.$router.push({
              path: "/list",
            });
          }
        }, 1000);
      }
    },

  },
};
</script>

<style lang="scss" scoped>
.top{
      position: relative;
    top: 108px;
    left: 24px;
    margin-top: 27px;
        background-color: #97afb9;
}
.count {
  font-size: 20px;
}
</style>
